﻿Ext.onReady(function () {

    Ext.QuickTips.init();

    var xg = Ext.grid;
    var fm = Ext.form;
    // shared reader
    var reader = new Ext.data.JsonReader(
        {
             idProperty: 'Id',
             root:'Root',
             fields:[
                       { name: 'Id' },
                       { name: 'Name' },
                       { name: 'BirthDate', type: 'date' },
                       { name: 'Weight', type: 'float' },
                       { name: 'Height', type: 'float' }
                    ]
        });
    var writer = new Ext.data.JsonWriter({
        encode: false,
        encodeDelete: false,
        writeAllFields:true
    });
    ////////////////////////////////////////////////////////////////////////////////////////
    // Grid 4
    ////////////////////////////////////////////////////////////////////////////////////////
    var sm2 = new xg.CheckboxSelectionModel({
        listeners: {
            // On selection change, set enabled state of the removeButton
            // which was placed into the GridPanel using the ref config
            selectionchange: function (sm) {
                if (sm.getCount()) {
                    grid4.removeButton.enable();
                } else {
                    grid4.removeButton.disable();
                }
            }
        }
    });
    var grid4 = new Ext.grid.EditorGridPanel({
        id: 'button-grid',
        store: new Ext.data.Store({
            reader: reader,
            writer: writer,
            autoLoad: true,
            autoSave: false,
            clicksToEdit: 2,
            proxy: new Ext.data.HttpProxy({
                type: 'ajax',
                //url: , // see options parameter for Ext.Ajax.request
                api: {
                    read: 'GetAdminJsonList',
                    create: 'Create',
                    update: 'Update',
                    destroy: 'Delete'
                }
            })
        }),
        cm: new Ext.grid.ColumnModel({
            columns:[
            { id: 'name', header: "Name", width: 40, sortable: true, dataIndex: 'Name', editor: new fm.TextField({allowBlank: false})},
            { header: "Date of birth", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'BirthDate',
                    editor: new fm.DateField({
                    format: 'm/d/Y',
                    minValue: '01/01/1920'
                })
            },
            { header: "Weight", width: 20, sortable: true, dataIndex: 'Weight', 
                editor: new fm.NumberField({
                allowBlank: false,
                allowNegative: false,
                maxValue: 400,
                minValue: 2
            }) },
            { header: "Height", width: 20, sortable: true, dataIndex: 'Height', 
                editor: new fm.NumberField({
                allowBlank: false,
                allowNegative: false,
                maxValue: 300,
                minValue: 30
            }) }]
        }),
        sm: sm2,
        viewConfig: {
            forceFit: true
        },
        columnLines: true,

        // inline buttons
        buttons: [{ text: 'Save',
            handler: function () {
                var store = grid4.getStore();
                if (store.save() === -1) alert('error');
            }
        },
            { text: 'Cancel',
                handler: function () {
                    var store = grid4.getStore();
                    (store.rejectChanges() );
                }
            }],
        buttonAlign: 'center',

        // inline toolbars
        tbar: [{
            xtype: 'button',
            text: 'Add Something',
            tooltip: 'Add a new row',
            iconCls: 'add',
            handler: function () {
                // access the Record constructor through the grid's store
                var People = grid4.getStore().recordType;
                var p = new People({
                    Name: 'New name',
                    BirthDate: "01/01/1990",
                    Weight: 80,
                    Height: 180
                });
                grid4.stopEditing();
                grid4.getStore().insert(0, p);
                grid4.startEditing(0, 0);
            }
        }, '-', {
            xtype: 'button',
            text: 'Remove Something',
            tooltip: 'Remove the selected item',
            iconCls: 'remove',
            handler: function () {
                var selection = grid4.getSelectionModel().getSelections();
                var dataStore = grid4.getStore();
                if (selection.length > 0) {
                    for (var i = 0; i < selection.length; i++) {
                        dataStore.remove(selection[i]);
                    }
                }

            },
            // Place a reference in the GridPanel
            ref: '../removeButton',
            disabled: true
        }],

        width: 600,
        height: 300,
        frame: true,
        collapsible: true,
        title: 'Peoples managed panel',
        iconCls: 'icon-grid',
        renderTo: document.getElementById("content")
    });

});


